<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>iscs_FrontEnd:html-style-guide</title>
	<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css" />
	<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css" />
	<!--<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css" />-->
	<link href="toc/css/metroStyle/metroStyle.css" media="all" rel="stylesheet" type="text/css" />
	<link href="toc/css/themes/github-v2.min.css" media="all" rel="stylesheet" type="text/css" />
	<link type="text/css" rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="indexcss/docs.css">
	<style>
		table {
			border: 1px solid #ccc;
			border-left: 0;
			width: 100%;
			font-size: 14px;
		}
		
		tbody,
		thead,
		tr {
			width: 100%;
		}
		
		tr th {
			border: 1px solid #ccc;
			border-right: 0;
			background: #FF6537;
			color: #fff;
			height: 40px;
			padding: 5px 10px;
			font-size: 14px;
		}
		
		tr td {
			text-align: left;
			padding: 5px 10px;
			border: 1px solid #ccc;
			border-right: 0;
		}
		
		tr:nth-child(odd) {
			background: #f4f4f4;
		}
		
		table tr:hover td {
			background: #ccc;
		}
		
		.markdown-body h1 {
			font-size: 20px;
			color: #FF6537;
		}
		
		.markdown-body h2 {
			font-size: 18px;
		}
		
		.markdown-body h3 {
			font-size: 16px;
		}
		
		#header {
			width: 100%;
			height: 25px;
			background-color: #FF6537;
			position: fixed;
			top: 0;
		}
	</style>

</head>

<body>
	
	<div>
		<div style='width:25%;'>
			<ul id="tree" class="ztree" style='width:100%;'>

			</ul>
		</div>
		<div id='readme' style='width:70%;margin-left:20%;'>
			<article class='markdown-body'>
				<p><strong>HTML编码规范</strong></p>
<h1 id="-">前言</h1>
<p>HTML 作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致，容易被理解和被维护。</p>
<h1 id="-">代码风格</h1>
<h2 id="-">缩进与换行</h2>
<p>[强制] 使用 <code>4</code> 个空格做为一个缩进层级，不允许使用 <code>2</code> 个空格 或 <code>tab</code> 字符。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;ul&gt;
    &lt;li&gt;first&lt;/li&gt;
    &lt;li&gt;second&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<p>[建议] 每行不得超过 <code>120</code> 个字符。</p>
<p>解释：</p>
<p>过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。</p>
<h2 id="-">命名</h2>
<p>[强制] <code>class</code> 必须单词全字母小写，单词间以 <code>-</code> 分隔。</p>
<p>[强制] <code>class</code> 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;

&lt;!-- bad --&gt;
&lt;div class=&quot;left&quot;&gt;&lt;/div&gt;
</code></pre>
<p>[强制] 元素 <code>id</code> 必须保证页面唯一。</p>
<p>解释：</p>
<p>同一个页面中，不同的元素包含相同的 <code>id</code>，不符合 <code>id</code> 的属性含义。并且使用 <code>document.getElementById</code> 时可能导致难以追查的问题。</p>
<p>[建议] <code>id</code> 建议单词全字母小写，单词间以 <code>-</code> 分隔。同项目必须保持风格一致。</p>
<p>[建议] <code>id</code>、<code>class</code> 命名，在避免冲突并描述清楚的前提下尽可能短。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;div id=&quot;nav&quot;&gt;&lt;/div&gt;
&lt;!-- bad --&gt;
&lt;div id=&quot;navigation&quot;&gt;&lt;/div&gt;

&lt;!-- good --&gt;
&lt;p class=&quot;comment&quot;&gt;&lt;/p&gt;
&lt;!-- bad --&gt;
&lt;p class=&quot;com&quot;&gt;&lt;/p&gt;

&lt;!-- good --&gt;
&lt;span class=&quot;author&quot;&gt;&lt;/span&gt;
&lt;!-- bad --&gt;
&lt;span class=&quot;red&quot;&gt;&lt;/span&gt;
</code></pre>
<p>[强制] 禁止为了 <code>hook 脚本</code>，创建无样式信息的 <code>class</code>。</p>
<p>解释：</p>
<p>不允许 <code>class</code> 只用于让 JavaScript 选择某些元素，<code>class</code> 应该具有明确的语义和样式。否则容易导致 CSS class 泛滥。</p>
<p>使用 <code>id</code>、属性选择作为 hook 是更好的方式。</p>
<p>[强制] 同一页面，应避免使用相同的 <code>name</code> 与 <code>id</code>。</p>
<p>解释：</p>
<p>IE 浏览器会混淆元素的 <code>id</code> 和 <code>name</code> 属性， <code>document.getElementById</code> 可能获得不期望的元素。所以在对元素的 <code>id</code> 与 <code>name</code> 属性的命名需要非常小心。</p>
<p>一个比较好的实践是，为 <code>id</code> 和 <code>name</code> 使用不同的命名法。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;input name=&quot;foo&quot;&gt;
&lt;div id=&quot;foo&quot;&gt;&lt;/div&gt;
&lt;script&gt;
// IE6 将显示 INPUT
alert(document.getElementById(&#39;foo&#39;).tagName);
&lt;/script&gt;
`
</code></pre>
<h2 id="-">标签</h2>
<p>[强制] 标签名必须使用小写字母。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;p&gt;Hello StyleGuide!&lt;/p&gt;

&lt;!-- bad --&gt;
&lt;P&gt;Hello StyleGuide!&lt;/P&gt;
</code></pre>
<p>[强制] 对于无需自闭合的标签，不允许自闭合。</p>
<p>解释：</p>
<p>常见无需自闭合标签有 <code>input</code>、<code>br</code>、<code>img</code>、<code>hr</code> 等。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;input type=&quot;text&quot; name=&quot;title&quot;&gt;

&lt;!-- bad --&gt;
&lt;input type=&quot;text&quot; name=&quot;title&quot; /&gt;
</code></pre>
<p>[强制] 对 <code>HTML5</code> 中规定允许省略的闭合标签，不允许省略闭合标签。</p>
<p>解释：</p>
<p>对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;ul&gt;
    &lt;li&gt;first&lt;/li&gt;
    &lt;li&gt;second&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- bad --&gt;
&lt;ul&gt;
    &lt;li&gt;first
    &lt;li&gt;second
&lt;/ul&gt;
</code></pre>
<p>[强制] 标签使用必须符合标签嵌套规则。</p>
<p>解释：</p>
<p>比如 <code>div</code> 不得置于 <code>p</code> 中，<code>tbody</code> 必须置于 <code>table</code> 中。</p>
<p>详细的标签嵌套规则参见<a href="http://www.cs.tut.fi/~jkorpela/html5.dtd">HTML DTD</a>中的 <code>Elements</code> 定义部分。</p>
<p>[建议] HTML 标签的使用应该遵循标签的语义。</p>
<p>解释：</p>
<p>下面是常见标签语义</p>
<ul>
<li>p - 段落</li>
<li>h1,h2,h3,h4,h5,h6 - 层级标题</li>
<li>strong,em - 强调</li>
<li>ins - 插入</li>
<li>del - 删除</li>
<li>abbr - 缩写</li>
<li>code - 代码标识</li>
<li>cite - 引述来源作品的标题</li>
<li>q - 引用</li>
<li>blockquote - 一段或长篇引用</li>
<li>ul - 无序列表</li>
<li>ol - 有序列表</li>
<li>dl,dt,dd - 定义列表</li>
</ul>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;p&gt;Esprima serves as an important &lt;strong&gt;building block&lt;/strong&gt; for some JavaScript language tools.&lt;/p&gt;

&lt;!-- bad --&gt;
&lt;div&gt;Esprima serves as an important &lt;span class=&quot;strong&quot;&gt;building block&lt;/span&gt; for some JavaScript language tools.&lt;/div&gt;
</code></pre>
<p>[建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。</p>
<p>解释：</p>
<p>在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。</p>
<p>[建议] 标签的使用应尽量简洁，减少不必要的标签。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;img class=&quot;avatar&quot; src=&quot;image.png&quot;&gt;

&lt;!-- bad --&gt;
&lt;span class=&quot;avatar&quot;&gt;
    &lt;img src=&quot;image.png&quot;&gt;
&lt;/span&gt;
</code></pre>
<h2 id="-">属性</h2>
<p>[强制] 属性名必须使用小写字母。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;table cellspacing=&quot;0&quot;&gt;...&lt;/table&gt;

&lt;!-- bad --&gt;
&lt;table cellSpacing=&quot;0&quot;&gt;...&lt;/table&gt;
</code></pre>
<p>[强制] 属性值必须用双引号包围。</p>
<p>解释：</p>
<p>不允许使用单引号，不允许不使用引号。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;script src=&quot;esl.js&quot;&gt;&lt;/script&gt;

&lt;!-- bad --&gt;
&lt;script src=&#39;esl.js&#39;&gt;&lt;/script&gt;
&lt;script src=esl.js&gt;&lt;/script&gt;
</code></pre>
<p>[建议] 布尔类型的属性，建议不添加属性值。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;input type=&quot;text&quot; disabled&gt;
&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; checked&gt;
</code></pre>
<p>[建议] 自定义属性建议以 <code>xxx-</code> 为前缀，推荐使用 <code>data-</code>。</p>
<p>解释：</p>
<p>使用前缀有助于区分自定义属性和标准定义的属性。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;ol data-ui-type=&quot;Select&quot;&gt;&lt;/ol&gt;
</code></pre>
<h1 id="-">通用</h1>
<h2 id="doctype">DOCTYPE</h2>
<p>[强制] 使用 <code>HTML5</code> 的 <code>doctype</code> 来启用标准模式，建议使用大写的 <code>DOCTYPE</code>。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!DOCTYPE html&gt;
</code></pre>
<p>[建议] 启用 IE Edge 模式。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;
</code></pre>
<p>[建议] 在 <code>html</code> 标签上设置正确的 <code>lang</code> 属性。</p>
<p>解释：</p>
<p>有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;html lang=&quot;zh-CN&quot;&gt;
</code></pre>
<h2 id="-">编码</h2>
<p>[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 <code>meta</code> 必须是 <code>head</code> 的第一个直接子元素。</p>
<p>解释：</p>
<p>见 <a href="http://www.qianduan.net/html5-charset-can-it.html">HTML5 Charset能用吗</a> 一文。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        ......
    &lt;/head&gt;
    &lt;body&gt;
        ......
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>[建议] <code>HTML</code> 文件使用无 <code>BOM</code> 的 <code>UTF-8</code> 编码。</p>
<p>解释：</p>
<p><code>UTF-8</code> 编码具有更广泛的适应性。<code>BOM</code> 在使用程序或工具处理文件时可能造成不必要的干扰。</p>
<h2 id="css-javascript-">CSS 和 JavaScript 引入</h2>
<p>[强制] 引入 <code>CSS</code> 时必须指明 <code>rel=&quot;stylesheet&quot;</code>。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;page.css&quot;&gt;
</code></pre>
<p>[建议] 引入 <code>CSS</code> 和 <code>JavaScript</code> 时无须指明 <code>type</code> 属性。</p>
<p>解释：</p>
<p><code>text/css</code> 和 <code>text/javascript</code> 是 <code>type</code> 的默认值。</p>
<p>[建议] 展现定义放置于外部 <code>CSS</code> 中，行为定义放置于外部 <code>JavaScript</code> 中。</p>
<p>解释：</p>
<p>结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。</p>
<p>[建议] 在 <code>head</code> 中引入页面需要的所有 <code>CSS</code> 资源。</p>
<p>解释：</p>
<p>在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。</p>
<p>[建议] <code>JavaScript</code> 应当放在页面末尾，或采用异步加载。</p>
<p>解释：</p>
<p>将 <code>script</code> 放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;body&gt;
    &lt;!-- a lot of elements --&gt;
    &lt;script src=&quot;init-behavior.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>[建议] 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 <code>URL</code> 协议部分与页面相同，建议省略协议前缀。</p>
<p>解释：</p>
<p>使用 <code>protocol-relative URL</code> 引入 CSS，在 <code>IE7/8</code> 下，会发两次请求。是否使用 <code>protocol-relative URL</code> 应充分考虑页面针对的环境。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;script src=&quot;//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js&quot;&gt;&lt;/script&gt;
</code></pre>
<h1 id="head">head</h1>
<h2 id="title">title</h2>
<p>[强制] 页面必须包含 <code>title</code> 标签声明标题。</p>
<p>[强制] <code>title</code> 必须作为 <code>head</code> 的直接子元素，并紧随 <code>charset</code> 声明之后。</p>
<p>解释：</p>
<p><code>title</code> 中如果包含 ASCII 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
</code></pre>
<h2 id="favicon">favicon</h2>
<p>[强制] 保证 <code>favicon</code> 可访问。</p>
<p>解释：</p>
<p>在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 <code>favicon.ico</code> 。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：</p>
<ol>
<li>在 Web Server 根目录放置 <code>favicon.ico</code> 文件。</li>
<li>使用 <code>link</code> 指定 favicon。</li>
</ol>
<p>示例：</p>
<pre><code class="lang-html">&lt;link rel=&quot;shortcut icon&quot; href=&quot;path/to/favicon.ico&quot;&gt;
</code></pre>
<h2 id="viewport">viewport</h2>
<p>[建议] 若页面欲对移动设备友好，需指定页面的 <code>viewport</code>。</p>
<p>解释：</p>
<p>viewport meta tag 可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。</p>
<p>比如，在页面宽度小于 <code>980px</code> 时，若需 iOS 设备友好，应当设置 viewport 的 <code>width</code> 值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用 <code>device-width</code> 和 <code>device-height</code> 变量。</p>
<p>另外，为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。关于 viewport 的更多介绍，可以参见 <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW26">Safari Web Content Guide的介绍</a></p>
<h1 id="-">图片</h1>
<p>[强制] 禁止 <code>img</code> 的 <code>src</code> 取值为空。延迟加载的图片也要增加默认的 <code>src</code>。</p>
<p>解释：</p>
<p><code>src</code> 取值为空，会导致部分浏览器重新加载一次当前页面，参考：<a href="https://developer.yahoo.com/performance/rules.html#emptysrc">https://developer.yahoo.com/performance/rules.html#emptysrc</a></p>
<p>[建议] 避免为 <code>img</code> 添加不必要的 <code>title</code> 属性。</p>
<p>解释：</p>
<p>多余的 <code>title</code> 影响看图体验，并且增加了页面尺寸。</p>
<p>[建议] 为重要图片添加 <code>alt</code> 属性。</p>
<p>解释：</p>
<p>可以提高图片加载失败时的用户体验。</p>
<p>[建议] 添加 <code>width</code> 和 <code>height</code> 属性，以避免页面抖动。</p>
<p>[建议] 有下载需求的图片采用 <code>img</code> 标签实现，无下载需求的图片采用 CSS 背景图实现。</p>
<p>解释：</p>
<ol>
<li>产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 <code>img</code> 形式实现，能方便用户下载。</li>
<li>无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 CSS 背景图实现。</li>
</ol>
<h1 id="-">表单</h1>
<h2 id="-">控件标题</h2>
<p>[强制] 有文本标题的控件必须使用 <code>label</code> 标签将其与其标题相关联。</p>
<p>解释：</p>
<p>有两种方式：</p>
<ol>
<li>将控件置于 <code>label</code> 内。</li>
<li><code>label</code> 的 <code>for</code> 属性指向控件的 <code>id</code>。</li>
</ol>
<p>推荐使用第一种，减少不必要的 <code>id</code>。如果 DOM 结构不允许直接嵌套，则应使用第二种。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;confirm&quot; value=&quot;on&quot;&gt; 我已确认上述条款&lt;/label&gt;

&lt;label for=&quot;username&quot;&gt;用户名：&lt;/label&gt; &lt;input type=&quot;textbox&quot; name=&quot;username&quot; id=&quot;username&quot;&gt;
</code></pre>
<h2 id="-">按钮</h2>
<p>[强制] 使用 <code>button</code> 元素时必须指明 <code>type</code> 属性值。</p>
<p>解释：</p>
<p><code>button</code> 元素的默认 <code>type</code> 为 <code>submit</code>，如果被置于 <code>form</code> 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 <code>type</code> 属性。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt;
&lt;button type=&quot;button&quot;&gt;取消&lt;/button&gt;
</code></pre>
<p>[建议] 尽量不要使用按钮类元素的 <code>name</code> 属性。</p>
<p>解释：</p>
<p>由于浏览器兼容性问题，使用按钮的 <code>name</code> 属性会带来许多难以发现的问题。具体情况可参考<a href="http://w3help.org/zh-cn/causes/CM2001">此文</a>。</p>
<h2 id="-a11y-">可访问性 (A11Y)</h2>
<p>[建议] 负责主要功能的按钮在 DOM 中的顺序应靠前。</p>
<p>解释：</p>
<p>负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 <code>float: right</code> 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;style&gt;
.buttons .button-group {
    float: right;
}
&lt;/style&gt;

&lt;div class=&quot;buttons&quot;&gt;
    &lt;div class=&quot;button-group&quot;&gt;
        &lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt;
        &lt;button type=&quot;button&quot;&gt;取消&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- bad --&gt;
&lt;style&gt;
.buttons button {
    float: right;
}
&lt;/style&gt;

&lt;div class=&quot;buttons&quot;&gt;
    &lt;button type=&quot;button&quot;&gt;取消&lt;/button&gt;
    &lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<p>[建议] 当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作。</p>
<p>解释：</p>
<p>当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 <code>form</code> 元素的 <code>action</code> 属性和表单控件的 <code>name</code> 属性时，提交仍可继续进行。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;form action=&quot;/login&quot; method=&quot;post&quot;&gt;
    &lt;p&gt;&lt;input name=&quot;username&quot; type=&quot;text&quot; placeholder=&quot;用户名&quot;&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input name=&quot;password&quot; type=&quot;password&quot; placeholder=&quot;密码&quot;&gt;&lt;/p&gt;
&lt;/form&gt;
</code></pre>
<p>[建议] 在针对移动设备开发的页面时，根据内容类型指定输入框的 <code>type</code> 属性。</p>
<p>解释：</p>
<p>根据内容类型指定输入框类型，能获得能友好的输入体验。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;input type=&quot;date&quot;&gt;
</code></pre>
<h1 id="-">多媒体</h1>
<p>[建议] 当在现代浏览器中使用 <code>audio</code> 以及 <code>video</code> 标签来播放音频、视频时，应当注意格式。</p>
<p>解释：</p>
<p>音频应尽可能覆盖到如下格式：</p>
<ul>
<li>MP3</li>
<li>WAV</li>
<li>Ogg</li>
</ul>
<p>视频应尽可能覆盖到如下格式：</p>
<ul>
<li>MP4</li>
<li>WebM</li>
<li>Ogg</li>
</ul>
<p>[建议] 在支持 <code>HTML5</code> 的浏览器中优先使用 <code>audio</code> 和 <code>video</code> 标签来定义音视频元素。</p>
<p>[建议] 使用退化到插件的方式来对多浏览器进行支持。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;audio controls&gt;
    &lt;source src=&quot;audio.mp3&quot; type=&quot;audio/mpeg&quot;&gt;
    &lt;source src=&quot;audio.ogg&quot; type=&quot;audio/ogg&quot;&gt;
    &lt;object width=&quot;100&quot; height=&quot;50&quot; data=&quot;audio.mp3&quot;&gt;
        &lt;embed width=&quot;100&quot; height=&quot;50&quot; src=&quot;audio.swf&quot;&gt;
    &lt;/object&gt;
&lt;/audio&gt;

&lt;video width=&quot;100&quot; height=&quot;50&quot; controls&gt;
    &lt;source src=&quot;video.mp4&quot; type=&quot;video/mp4&quot;&gt;
    &lt;source src=&quot;video.ogg&quot; type=&quot;video/ogg&quot;&gt;
    &lt;object width=&quot;100&quot; height=&quot;50&quot; data=&quot;video.mp4&quot;&gt;
        &lt;embed width=&quot;100&quot; height=&quot;50&quot; src=&quot;video.swf&quot;&gt;
    &lt;/object&gt;
&lt;/video&gt;
</code></pre>
<p>[建议] 只在必要的时候开启音视频的自动播放。</p>
<p>[建议] 在 <code>object</code> 标签内部提供指示浏览器不支持该标签的说明。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;object width=&quot;100&quot; height=&quot;50&quot; data=&quot;something.swf&quot;&gt;DO NOT SUPPORT THIS TAG&lt;/object&gt;
</code></pre>
<h1 id="-html">模板中的 HTML</h1>
<p>[建议] 模板代码的缩进优先保证 HTML 代码的缩进规则。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
{if $display == true}
&lt;div&gt;
    &lt;ul&gt;
    {foreach $item_list as $item}
        &lt;li&gt;{$item.name}&lt;li&gt;
    {/foreach}
    &lt;/ul&gt;
&lt;/div&gt;
{/if}

&lt;!-- bad --&gt;
{if $display == true}
    &lt;div&gt;
        &lt;ul&gt;
    {foreach $item_list as $item}
        &lt;li&gt;{$item.name}&lt;li&gt;
    {/foreach}
        &lt;/ul&gt;
    &lt;/div&gt;
{/if}
</code></pre>
<p>[建议] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;li class=&quot;{if $item.type_id == $current_type}focus{/if}&quot;&gt;{ $item.type_name }&lt;/li&gt;

&lt;!-- bad --&gt;
&lt;li {if $item.type_id == $current_type} class=&quot;focus&quot;{/if}&gt;{ $item.type_name }&lt;/li&gt;
</code></pre>
<p>[建议] 在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出。</p>
<p>示例：</p>
<pre><code class="lang-html">&lt;!-- good --&gt;
&lt;table&gt;
    {foreach $item_list as $item_group}
    &lt;tr&gt;
        {foreach $item_group as $item}
        &lt;td&gt;{ $item.name }&lt;/td&gt;
        {/foreach}
    &lt;tr&gt;
    {/foreach}
&lt;/table&gt;

&lt;!-- bad --&gt;
&lt;table&gt;
&lt;tr&gt;
    {foreach $item_list as $item}
    &lt;td&gt;{ $item.name }&lt;/td&gt;
        {if $item@iteration is div by 5}
    &lt;/tr&gt;
    &lt;tr&gt;
        {/if}
    {/foreach}
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

			</article>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>
<script type="text/javascript" src="toc/js/prettify.js"></script>

<SCRIPT type="text/javascript">
	$(function() {
		var css_conf = eval(markdown_panel_style);
		$('#readme').css(css_conf)

		var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
		$('pre').addClass('prettyprint linenums');
		$('td pre').removeClass('prettyprint');
		prettyPrint();

	});
</SCRIPT>